<template>
    <div id="invigilate">
        <div class="invigilate-title">
            <div>考场实时监控平台</div>
            <div style="font-size: 14px;">Examination room real-time invigilator platform</div>
        </div>
        <div class="invigilate-info">
            <span>考试编号：{{examInfo.id}}</span>
            <span>考试名称：{{examInfo.examName}}</span>
            <br>
            <span>考试人数：{{heart.online.length}} / {{examInfo.examJoinNum}} 人</span>
            <span>考场位置：{{examInfo.examLocation || '线上'}}</span>
            <div style="position: absolute;top: 0;right: 0px;">
                <div>
                    <span class="time">系统时间： {{now}}</span>
                </div>
                <div style="text-align: left;">
                    <el-button type="text" @click="$router.replace('/examination/exam')">
                        退出系统
                    </el-button>
                </div>
            </div>
        </div>

        <div class="invigilate-main">
            <el-row v-if="heart.online.length>0" :gutter="15">
                <el-col :span="4" v-for="(item,i) in heart.online" :key="item.examCardNum">
                    <div class="invigilate-item">
                        <div class="invigilate-item-img">
                            <div class="block">
                                <el-image :src="item.online<0?'':item.photo" class="jkhm">
                                    <div slot="error" class="image-slot"
                                         style="text-align: center;padding-top: 35px;color: #c1c1c1;">
                                        <i class="el-icon-video-camera"
                                           style="font-size: 36px;"></i>
                                        <div style="font-size: 12px;">
                                            视频传输失败!
                                        </div>
                                    </div>
                                </el-image>
                            </div>
                        </div>
                        <div class="invigilate-item-bottom">
                            <span>准考证号： {{item.examCardNum}}</span>
                            <br>
                            <span>离开次数： 0</span>
                            <br>
                            <div>考试状态：
                                <div v-if="item.online>0" style="display: inline-block">
                                    <span class="point point-1"></span>
                                    在线
                                </div>
                                <div v-else style="display: inline-block">
                                    <span class="point point-2"></span>
                                    离线
                                </div>

                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div v-else class="not-online">
                <div v-if="heart.examState===4">
                    <div>
                        <i class="el-icon-circle-check"></i>
                    </div>
                    <h2>考试已经结束!</h2>
                </div>
                <div v-if="heart.examState===3&&heart.online.length===0">
                    <div>
                        <i class="el-icon-warning-outline"></i>
                    </div>
                    <h2>当前无在线考生！</h2>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import {getOnlineExameeHeat, getOnlineExameeInfo} from "../../../../api/examination";

    export default {
        name: "index",
        data() {
            return {
                examInfo: null,
                onlineExameeInfo: null,
                timer: null,
                heart: [],
                now: "00:00:00",
            }
        },
        created() {
            this.examInfo = this.$route.params.examInfo
            this.getOnlineExameeInfo(this.examInfo.id)
            this.getOnlineData();
        },
        beforeDestroy() {
            clearTimeout(this.timer)
        },
        methods: {
            async getOnlineExameeInfo(examId) {
                let resp = await getOnlineExameeInfo(examId);
                this.onlineExameeInfo = resp.data
            },
            async getOnlineData() {
                let now = new Date()
                let h = this.insertO(now.getHours());
                let i = this.insertO(now.getMinutes());
                let s = this.insertO(now.getSeconds());
                this.now = `${h}:${i}:${s}`;

                let resp = await getOnlineExameeHeat(this.examInfo.id)
                this.heart = resp.data
                this.timer = setTimeout(this.getOnlineData, 1000);
            },
            insertO(num) {
                if (num < 10) {
                    return "0" + num
                }
                return num;
            },
        }
    }
</script>

<style scoped lang="scss">
    #invigilate {
        color: #fff;
        width: 100vw;
        min-width: 1300px;
        height: 100vh;
        background-image: url("../../../../assets/true.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .invigilate-title {
            letter-spacing: 2px;
            height: 80px;
            background-image: url("../../../../assets/title.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-size: 2em;
            padding: 8px 0;
        }

        .invigilate-info {
            height: 50px;
            position: relative;
            padding: 0 15px;

            span {
                display: inline-flex;
                min-width: 200px;
                font-size: 14px;
                letter-spacing: 2px;
                font-weight: bold;
                color: #2997e4;
                margin: 0;
            }
        }

        .invigilate-main {
            height: calc(100vh - 130px);
            overflow-y: auto;
            overflow-x: hidden;

            .invigilate-item {
                width: 210px;
                min-height: 180px;
                border: 1px solid #2997e4;
                margin: 15px auto;
                position: relative;

                .invigilate-item-img {
                    .jkhm {
                        height: 130px;
                        width: 100%;
                        border-bottom: 2px solid #2997e4;
                    }
                }

                .invigilate-item-bottom {
                    padding: 5px;
                    min-height: 50px;
                    font-size: 12px;
                    color: #2997e4;

                    .point {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        position: relative;
                        top: 1px;
                    }

                    .point-1 {
                        background-color: green;
                    }

                    .point-2 {
                        background-color: red;

                    }
                }
            }
        }
    }

    .not-online {
        width: 100%;
        position: relative;
        color: #2997e4;
        text-align: center;
        padding-top: 100px;
        font-weight: bold;
        letter-spacing: 5px;
        margin: 0;

        h2 {
            font-size: 42px;
            margin-top: 10px;
        }

        i {
            font-size: 100px;
        }
    }
</style>